<template>
  <view class="shadow">
    <view class="info-head">
      <image :src="base64ToBlobUrl(actInfo?.url as string)" class="img" />
      <view class="info-title">
        <view class="info-name">{{ actInfo?.name }}</view>
        <view>{{ actInfo?.time }}</view>
      </view>
    </view>
  </view>
  <view class="shadow">
    <view class="info-body">
      <view class="body-item">
        <view class="info-normal">报名状态:</view>
        <view class="info-txt">{{ actInfo?.state }}</view>
      </view>
      <view class="body-item">
        <view class="info-normal">审核规则:</view>
        <view class="info-txt">无需审核</view>
      </view>
      <view class="body-item" style="border-bottom: none">
        <view class="info-normal">取消规则:</view>
        <view class="info-txt">随时取消</view>
      </view>
    </view>
  </view>
  <view class="shadow">
    <view class="info-desc">
      <up-parse :content="actInfo?.desc"></up-parse>
    </view>
  </view>
  <view class="enroll">
    <view class="enroll-btn" @click="register">立即参加</view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { actItem } from '@/types/activityPage'
import { activeInfo } from '@/api/home'
import { base64ToBlobUrl } from '@/common/img'

const actInfo = ref<actItem>()

const ritchText = `<div style="padding: 20rpx; width: 100%;">  
    <h2 style="text-align: center; color: #333;">羽毛球比赛详情介绍</h2>  
    <p style="color: #666; line-height: 1.6; font-size: 16px;">  
        <strong>比赛名称：</strong>XX市羽毛球锦标赛<br><br>  
          
        <strong>比赛时间：</strong>2023年10月15日至10月17日<br><br>  
          
        <strong>比赛地点：</strong>XX市体育中心羽毛球馆<br><br>  
          
        <strong>主办单位：</strong>XX市体育局<br><br>  
          
        <strong>参赛对象：</strong>全市羽毛球爱好者，分为男子单打、女子单打、男子双打、女子双打以及混合双打五个组别。<br><br>  
          
        <strong>比赛规则：</strong><br>  
        1. 比赛采用国际羽联最新公布的《羽毛球竞赛规则》。<br>  
        2. 每场比赛采取三局两胜制，每局21分，先到21分的一方获胜。如果双方比分打成20比20，获胜一方需超过对手2分才算取胜。<br>  
        3. 每场比赛开始前，双方选手有10分钟的热身时间。<br>  
        4. 参赛选手需自备球拍，比赛用球由主办方统一提供。<br><br>  
          
        <strong>报名方式：</strong><br>  
        参赛选手需登录XX市体育局官方网站进行在线报名，报名截止日期为2023年10月1日。报名时需提交个人有效证件复印件及近期免冠照片一张。<br><br>  
          
        <strong>奖项设置：</strong><br>  
        各组别设立冠、亚、季军，颁发奖牌、证书及奖品。同时设立最佳风尚奖、最佳进步奖等多个奖项，以表彰在比赛中表现突出的选手。<br><br>  
          
        <strong>注意事项：</strong><br>  
        1. 参赛选手需遵守比赛纪律，尊重对手，服从裁判。<br>  
        2. 选手需按时到场签到，迟到或无故缺席视为弃权。<br>  
        3. 比赛期间，请保持场馆内清洁，禁止吸烟及乱扔垃圾。<br>  
        4. 主办方对比赛拥有最终解释权，未尽事宜由主办方另行通知。<br><br>  
          
        <strong>联系方式：</strong><br>  
        联系人：张教练<br>  
        联系电话：123-4567-8901<br>  
        电子邮箱：info@xxsports.com<br><br>  
          
        <strong>期待您的参与，共同见证这场精彩纷呈的羽毛球盛宴！</strong>  
    </p>  
</div>`

onLoad(async (option: any) => {
  const res = await activeInfo(option.id)
  actInfo.value = res.data
  actInfo.value.desc = ritchText
})

const register = () => {
  uni.showToast({
    title: '该活动需要线下参与',
    icon: 'warn'
  })
}
</script>

<style lang="scss" scoped>
.shadow {
  width: 100%;
  height: auto;
  // 设置边框阴影
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}
.info-head {
  width: 95%;
  height: auto;
  padding: 20rpx 0;
  margin: 0 auto;
  .img {
    width: 100%;
    border-radius: 15rpx;
  }
  .info-title {
    color: #999;
    font-size: 26rpx;
    margin-top: 10rpx;
    padding: 5rpx 0;
    .info-name {
      color: #000;
      font-size: 32rpx;
      margin-bottom: 10rpx;
    }
  }
}
.info-body {
  width: 95%;
  margin: 0 auto;
  padding: 20rpx 10rpx;
  .body-item {
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    border-bottom: 1px solid #eee;
    line-height: 50rpx;
    padding: 10rpx 0;
    .info-normal {
      width: 30%;
      color: #000;
      font-weight: 700;
    }
    .info-txt {
      width: 70%;
      color: #999;
    }
  }
}
.info-desc {
  width: 95%;
  margin: 0 auto;
  padding: 20rpx 10rpx;
}
.enroll {
  width: 100%;
  // 设置吸底效果
  position: fixed;
  bottom: 0;
  .enroll-btn {
    width: 98%;
    margin: 0 auto;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    background-color: #fca363;
    border-radius: 8rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-weight: bold;
  }
}
</style>
